@use "theme/globals" as *;

h3 {
    font: var(--mdl-typography-heading5-font);
}

h4 {
    font: var(--mdl-typography-heading6-font);
}

.addon-block-timeline-activity {
    ion-badge {
        @include margin-horizontal(0.25rem, 0.5rem);
    }

    small {
        @include margin-horizontal(null, 0.5rem);
    }

    core-mod-icon {
        --module-legacy-icon-padding: 8px;
        --margin-end: 0.5rem;
        --margin-vertical: 0;
    }

    ion-label {
        display: flex;
        flex-direction: column;

        .addon-block-timeline-activity-action {
            display: flex;
            justify-content: flex-end;
        }
    }
}

.addon-block-timeline-activity-time {
    flex-grow: 0;
}

.addon-block-timeline-activity-name {
    flex-grow: 1;
    overflow: hidden;

    & > p {
        display: flex;
        flex-wrap: wrap;

        & > span {
            @include ellipsis();
        }

    }

}
